<template>
  <view class="result-container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <view class="back-button" @click="goBack">
        <uni-icons type="arrow-left" size="38"></uni-icons>
      </view>
      <text class="header-title">搜索结果</text>
    </view>

    <!-- 标签筛选区域 -->
    <!-- <view class="filter-tags">
      <scroll-view scroll-x="true" class="tags-scroll">
        <view class="tags-container">
          <view
            v-for="(tag, index) in tags"
            :key="index"
            class="tag-item"
            :class="{ active: selectedTag === tag }"
            @click="selectTag(tag)"
          >
            # {{ tag }}
          </view>
        </view>
      </scroll-view>
    </view> -->

    <!-- 瀑布流内容区域 -->
    <scroll-view
      scroll-y="true"
      class="waterfall-scroll"
      @scrolltolower="loadMore"
      @refresherrefresh="onRefresh"
      refresher-enabled
      :refresher-triggered="isRefreshing"
    >
      <view class="waterfall-container">
        <view
          class="campus-card"
          v-for="(item, index) in searchResults"
          :key="index"
          @click="goDetail(item)"
        >
          <image
            class="card-image"
            :src="getFirstImage(item.article_images)"
            mode="widthFix"
            @load="(e) => imageLoad(e, item)"
            v-if="item.article_images && item.article_images.length > 0"
          ></image>
          <view class="card-content">
            <view class="card-title">{{ item.article_title }}</view>
            <view class="card-footer">
              <view class="user-info">
                <image class="user-avatar" :src="item.user_avatar"></image>
                <text class="user-name">{{ item.user_nickname }}</text>
              </view>
              <view class="interaction">
                <text class="like-count">{{ item.article_likes || 0 }}</text>
                <text class="icon-heart">♡</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 加载更多提示 -->
      <view class="loading-more" v-if="hasMore">
        <text>加载中...</text>
      </view>
      <view class="no-more" v-else>
        <text>没有更多数据了</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
  import { ref, onMounted } from "vue";
  import { onLoad } from "@dcloudio/uni-app";
  import { search } from "../../api/campus";

  // 标签列表
  const selectedTag = ref("全部");

  // 搜索结果数据
  const searchResults = ref([]);
  const page = ref(1);
  const hasMore = ref(true);
  const isRefreshing = ref(false);
  const isLoading = ref(false);

  // 搜索关键词
  const keyword = ref("");

  // 加载搜索数据
  const loadData = async (isRefresh = false) => {
    if (isRefresh) {
      page.value = 1;
      searchResults.value = [];
    }

    if (isLoading.value || (!hasMore.value && !isRefresh)) return;

    try {
      isLoading.value = true;
      const res = await search({
        search: keyword.value,
        page: page.value,
        pageSize: 10,
      });

      if (res.code === 200 && res.data.data.length > 0) {
        if (isRefresh) {
          searchResults.value = res.data.data;
        } else {
          searchResults.value.push(...res.data.data);
        }
        page.value++;
        hasMore.value = res.data.data.length === 10;
      } else {
        hasMore.value = false;
        if (!isRefresh) {
          uni.showToast({
            title: "没有更多数据了",
            icon: "none",
          });
        }
      }
    } catch (error) {
      console.error("搜索失败:", error);
      uni.showToast({
        title: "加载失败",
        icon: "error",
      });
    } finally {
      isLoading.value = false;
      isRefreshing.value = false;
    }
  };

  // 获取文章第一张图片
  const getFirstImage = (imageStr) => {
    try {
      if (typeof imageStr === "string") {
        console.log(imageStr);
        const imageArray = JSON.parse(imageStr);
        if (Array.isArray(imageArray) && imageArray.length > 0) {
          return imageArray[0];
        }
      }
      return "../../static/img/default.jpg"; // 默认图片
    } catch (error) {
      console.error("解析图片失败:", error);
      return "../../static/img/default.jpg"; // 解析失败时返回默认图片
    }
  };

  // 图片加载完成
  const imageLoad = (event, item) => {
    if (item) {
      item.imageLoaded = true;
    }
  };

  // 加载更多
  const loadMore = () => {
    if (!hasMore.value) return;
    loadData();
  };

  // 下拉刷新
  const onRefresh = () => {
    isRefreshing.value = true;
    loadData(true);
  };

  // 选择标签
  // const selectTag = (tag) => {
  //   selectedTag.value = tag;
  //   isRefreshing.value = true;
  //   loadData(true);
  // };

  // 跳转到详情页
  const goDetail = (item) => {
    uni.navigateTo({
      url: `/pages/campus/detail?article_id=${item.article_id}`,
    });
  };

  // 返回上一页
  const goBack = () => {
    uni.navigateBack();
  };

  onLoad((options) => {
    if (options.keyword) {
      keyword.value = options.keyword;
      // console.log(keyword.value);
      loadData(true);
    }
  });
</script>

<style lang="scss">
  .result-container {
    min-height: 100vh;
    background-color: #f5f5f5;

    .header {
      position: fixed;
      top: 50rpx;
      left: 0;
      right: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      padding: 20rpx 30rpx;
      .back-button {
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .header-title {
        flex: 1;
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        text-align: center;
      }
    }

    .waterfall-scroll {
      position: fixed;
      top: 180rpx;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #f8f8f8;
      padding: 20rpx;
    }

    .waterfall-container {
      column-count: 2;
      column-gap: 20rpx;
      padding: 10rpx;
      box-sizing: border-box;
      min-height: 100%;

      .campus-card {
        break-inside: avoid;
        margin-bottom: 20rpx;
        background-color: #fff;
        border-radius: 20rpx;
        overflow: hidden;
        box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
        transform: translateZ(0);
        transition: all 0.3s ease;

        &:active {
          transform: scale(0.98);
          box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
        }

        .card-image {
          width: 100%;
          height: auto;
          display: block;
          border-radius: 20rpx 20rpx 0 0;
          background-color: #f8f8f8;
          transition: opacity 0.3s ease;
        }

        .card-content {
          padding: 24rpx;

          .card-title {
            font-size: 28rpx;
            font-weight: 600;
            color: #333;
            margin-bottom: 16rpx;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }

          .card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 16rpx;

            .user-info {
              display: flex;
              align-items: center;
              flex: 1;
              min-width: 0;

              .user-avatar {
                width: 48rpx;
                height: 48rpx;
                border-radius: 50%;
                margin-right: 12rpx;
                border: 2rpx solid #fff;
                box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
              }

              .user-name {
                font-size: 24rpx;
                color: #666;
                flex: 1;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }

            .interaction {
              display: flex;
              align-items: center;
              margin-left: 16rpx;

              .like-count {
                font-size: 24rpx;
                color: #666;
                margin-right: 8rpx;
              }

              .icon-heart {
                font-size: 36rpx;
                color: #ff6b6b;
                transition: transform 0.3s ease;

                &:active {
                  transform: scale(1.2);
                }
              }
            }
          }
        }
      }
    }

    .skeleton {
      padding: 20rpx;

      .skeleton-image {
        width: 100%;
        height: 300rpx;
        background: linear-gradient(
          90deg,
          #f0f0f0 25%,
          #f8f8f8 37%,
          #f0f0f0 63%
        );
        background-size: 400% 100%;
        animation: skeleton-loading 1.4s ease infinite;
        margin-bottom: 20rpx;
      }

      .skeleton-title {
        width: 60%;
        height: 32rpx;
        background: linear-gradient(
          90deg,
          #f0f0f0 25%,
          #f8f8f8 37%,
          #f0f0f0 63%
        );
        background-size: 400% 100%;
        animation: skeleton-loading 1.4s ease infinite;
        margin-bottom: 16rpx;
      }

      .skeleton-content {
        width: 100%;
        height: 24rpx;
        background: linear-gradient(
          90deg,
          #f0f0f0 25%,
          #f8f8f8 37%,
          #f0f0f0 63%
        );
        background-size: 400% 100%;
        animation: skeleton-loading 1.4s ease infinite;
      }
    }

    @keyframes skeleton-loading {
      0% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0 50%;
      }
    }

    .loading-more,
    .no-more {
      text-align: center;
      padding: 30rpx 0;
      color: #999;
      font-size: 24rpx;
    }
  }
</style>
